<!DOCTYPE html>
<html lang="en">
<head>
	   {{template "pc/public/mycss.html" .}}
</head>
<style type="text/css">
	#wrapper{
		background: #f5f5f5!important;
	}
	.header-center{
		background: #fff;
	}
	.user_left{
		background: #fff;
	}
	.fenlei{
		width: 20%;
	}
	
	@media (max-width: 992px){
		.fenlei{
		    width: 100%;
		}
	}
    div.order_list a.c-999.mt-5.db-i { background-color: #e54242; color: #fff !important; width: 80px; padding: 3px 0; border-radius: 3px; }
    .my_order .order_list .neworder table tbody .order_detail .operation a:hover { color: #fff !important; }
</style>
<body class="common-home res layout-home1">
<div id="wrapper" class="wrapper-full banners-effect-7">
	<!-- Header Container  -->
	{{template "pc/public/head.html" .}}
  {{template "pc/public/mytop.html" .}}
	<div class="main-container container">
		<div class="row mb-50">
			<!--Left Part Start -->
			{{template "pc/public/myleft.html" .}}
			<!--Middle Part Start-->
			<div id="content" class="col-md-10 col-sm-8 right mt-15">
				<div class="allorder">
					<div class="my_order">
            <ul>
                <li class="{{if eq .status ""}}on{{end}} order1"><span><a href="/my/order">全部</a></span></li>
                <li class="{{if eq .status "1"}}on{{end}} order1"><span><a href="/my/order?status=1">待付款</a></span></li>
                <li class="{{if eq .status "2"}}on{{end}} order1"><span><a href="/my/order?status=2">待发货</a></span></li>
                <li class="{{if eq .status "3"}}on{{end}} order1"><span><a href="/my/order?status=3">待收货</a></span></li>
                <li class="{{if eq .status "4"}}on{{end}} order1"><span><a href="/my/order?status=4">待评价</a></span></li>
                <li class="{{if eq .status "5"}}on{{end}} order1"><span><a href="/my/order?status=5">已完成</a></span></li>
                <li class="{{if eq .status "6"}}on{{end}} order1"><span><a href="/my/order?status=6">退换货</a></span></li>
            </ul>
            <div class="tx-r search">
              <form action="/my/order">  
                <input type="text" name="ordernum" placeholder="输入商品名称或订单号搜索"></input>
                <input class="sub" type="button" value="搜索"></input>
              </form>
            </div>
            <div class="order_list">
                <div class="rental_order neworder">
                    <table class="table">
                        <thead class="cart_head">
                            <tr class="theader">
                                <th class="tx-l" width="45%">订单商品</th>
                                <th width="15%">单价</th>
                                <th width="10%">数量</th>
                                <th width="10%">状态</th>
                                <th width="20%">操作</th>
                            </tr>
                        </thead>
                        {{if .info}}
                        {{range $q,$i:=.info}}
                        <tbody id="{{$i.id}}">
                            <tr>
                                <td class="row-sep" colspan="5"></td>
                            </tr>
                            <style type="text/css">
                                .order_time samp{margin-left: 20px;}
                            </style>
                            <tr class="order_time">
                                <td colspan="5"><span>{{$i.addtime}}</span>订单号：{{$i.ordernum}} <samp>总数量:{{.sl}}箱</samp><samp>总体积:{{.tj}}立方</samp><samp>总重量:{{.zl}}千克</samp></td>
                            </tr>
                            {{range $k,$v:=.shopcar}}
                            <tr class="order_detail">
                                <td class="order_pic" colspan="1">
                                    <span><a href="/product/content?id={{$v.pid}}"><img src="{{$v.pathname}}"></a></span>
                                    <div class="cpintroduction">
                                        <p><a href="/product/content?id={{$v.pid}}">{{$v.title}}</a></p>
                                        <p>
                                            规格∶{{$v.number}}{{$v.spec}}/箱<br>
                                            型号∶{{$v.model}}
                                        </p>
                                    </div>
                                </td>
                                <td class="pri" colspan="1">
                                    <span>
                                        ￥{{$v.price}}/{{if eq $v.spec2 "1"}}件{{else}}箱{{end}}<br>
                                        <!-- 微信支付 -->
                                    </span>
                                </td>
                                <td colspan="1">{{$v.num}}</td>
                                {{if eq $k 0}}
                                <td class="c-e30b17" colspan="1" rowspan="{{($i.shopcar|len)}}">
                                    {{if eq $i.status "1"}}
                                    待付款
                                    {{else if eq $i.status "2"}}
                                    待发货
                                    {{else if eq $i.status "3"}}
                                    待收货
                                    {{else if eq $i.status "4"}}
                                    待评价
                                    {{else if eq $i.status "5"}}
                                    已完成
                                    {{else if eq $i.status "6"}}
                                    退换货
                                    {{end}}
                                    <br>
                                    <a href="/my/order/detail?id={{$i.id}}">订单详情</a><br>
                                    <a href="/my/order_excel?id={{$i.id}}">导出Excel</a>
                                </td>
                                <td class="operation"  colspan="1" rowspan="{{($i.shopcar|len)}}">
                                    {{if eq $i.status "1"}}
                                    <a class="c-999 mt-5 db-i cancleOrder" data-id="{{$i.id}}">取消订单</a><br>
                                    <a class="c-999 mt-5 db-i payOrder" data-id="{{$i.id}}">付款</a><br>
                                    {{end}}
                                    {{if eq $i.status "2"}}
                                    <a class="c-999 mt-5 db-i" href="/my/order/return_apply?id={{$i.id}}">申请退换</a><br>
                                    <a class="c-999 mt-5 db-i send" data-id="{{$i.id}}">提醒发货</a><br>
                                    {{end}}
                                    {{if eq $i.status "4"}}
                                    <a class="c-999 mt-5 db-i" href="/my/order/evaluation?id={{$i.id}}">前往评价</a><br>
                                    {{end}}
                                    {{if eq $i.status "4" "5"}}
                                    {{if eq $i.isre 1}}
                                    <a class="c-999 mt-5 db-i" href="/my/order/return_apply?id={{$i.id}}">申请退换</a><br>
                                    {{end}}
                                    {{end}}
                                    {{if eq $i.status "6"}}
                                    <a class="c-999 mt-5 db-i" href="/my/order/return_detail?id={{$i.return.id}}">退换详情</a><br>
                                    {{end}}
                                    <!-- <a class="c-999 mt-5 db-i" href="/my/order/return_detail?id={{$v.return.id}}">联系卖家</a><br> -->
                                </td>
                                {{else}}
                                {{end}}
                            </tr>
                            {{end}}
                        </tbody>
                        {{end}}
                        {{else}}
                        <tbody>
                            <tr>
                                <td colspan="5">
                                    <div style="border: none;" class="zworder">
                                        <img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/imgs/orderimg.png">
                                        <p>你已经很久没有下单了哦！</p>
                                        <a href="/">去逛逛</a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                        {{end}}
                    </table>
                    {{if .paginator}}
                    {{if ne .paginator.totalpages 1}}
                    <div class="page" style="text-align: center;">
                        {{if ne .paginator.currpage 1}}
                        <span class="prev new_prev">
                            <a href="{{$.url}}page={{.paginator.prevpage}}"><i class="iconfont icon-zuocefanhui"></i></a>
                        </span>
                        <span class="pd_page"><a href="{{$.url}}page=1">首页</a></span>
                        {{else}}
                        <span class="prev new_prev">
                            <i class="iconfont icon-zuocefanhui"></i>
                        </span>
                        <span class="pd_page">首页</span>
                        {{end}}
                        {{range $index,$page := .paginator.pages}}
                        {{if eq $.paginator.currpage $page}} 
                        <span class="on">{{$page}}</span>
                        {{else}}
                        <a class="num" href="{{$.url}}page={{$page}}"><span class="">{{$page}}</span></a>
                        {{end}}
                        {{end}}
                        {{if eq .paginator.currpage .paginator.totalpages}}
                        <span class="pd_page">末页</span>
                        <span class="new_next">
                        <i class="iconfont icon-youcexuanzejiantou"></i>
                        </span>
                        {{else}}
                        <a class="num" href="{{$.url}}page={{.paginator.totalpages}}"><span class="pd_page">末页</span></a>
                        <a class="next" href="{{$.url}}page={{.paginator.nextpage}}">
                            <span class="new_next">
                            <i class="iconfont icon-youcexuanzejiantou"></i>
                            </span>
                        </a>
                        {{end}}
                    </div>
                    {{end}}
                    {{end}}
                </div>
            </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style type="text/css">
    .paymask{position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);top: 0;left: 0;z-index: 1000000;display: none;}
    .paymask .pay{position: absolute;height: 180px;width: 600px;top: calc(50vh - 75px);left: calc(50vw - 300px);background: #fff;border-radius: 5px;z-index: 1000001}
    .paymask .pay ul{overflow: hidden;}
    .paymask .pay li{width: calc(100% / 3);float: left;height: 80px;overflow:hidden;padding: 10px}
    .paymask .pay li img{width: 100%;vertical-align: middle;border: 1px solid #eee;border-radius: 5px;}
    .paymask .pay h1{text-align: center;padding: 10px;height: 50px;}
    .paymask .pay li.on img{border:2px solid #e31939;}
    .paymask .bt{width: 100%;height: 50px;padding: 10px;text-align: center;}
    .paymask .bt button{width: 100px;height: 30px;margin: auto;border: 0;border-radius: 5px;}
    .paymask .bt button#payconfirm{background: #e31939;color: #fff;border:1px solid #e4393c;margin-right: 10px;}
    .paymask .bt button#paycancle{background: #eee;border:1px solid #ccc;}
</style>
<div class="paymask">
    <div class="pay">
        <h1>请选择支付方式</h1>
    <ul>
        <li data-type="2" class="on"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/wxpay.png" alt=""></li>
        <li data-type="1"><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/money.png" alt=""></li>
        <li data-type="3"><img style="padding:0 10px;" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/alipay.png" alt=""></li>
    </ul>
    <div class="bt">
        <button id="payconfirm">确定</button>
        <button id="paycancle">取消</button>
    </div>
    </div>
</div>
<style type="text/css">
      .wxpay_mask{position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);z-index: 100000;top: 0;left: 0;display: none;box-sizing: border-box;}
      .wxpay_mask #qrcode{position: absolute;top: calc(50vh - 120px);width: 240px;height: 240px;left: calc(50vw - 120px);z-index: 1000001;
        background: #fff;padding: 20px;border-radius: 5px;}
      .scan{position: absolute;top: calc(50vh + 100px);width: 240px;height: 45px;left: calc(50vw - 120px);z-index: 1000001;
        background: #fff;padding:0 20px 0 20px;border-radius: 5px;font-size: 16px;line-height: 45px;text-align: left;color: #666}
      .scan i.iconfont{color: #009900;font-size: 22px;margin-right: 5px;float: left;}
    </style>
  <div class="wxpay_mask">
    <div id="qrcode">
      
    </div>
    <div class="scan">
      <i class="iconfont">&#xe81b;</i>请使用微信扫一扫
    </div>
  </div>
{{template "pc/public/foot.html" .}}
{{template "pc/public/myfoot.html" .}}
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.qrcode.min.js"></script>
</body>
</html>
<script type="text/javascript">
    $('.cancleOrder').click(function(){
        var id=$(this).attr('data-id');
        wxc.xcConfirm("您确定要取消订单吗?","confirm",{onOk:function(){
            $.ajax({
                url:"/del",
                data:{id:id,table:'mt_order'},
                success:function(res){
                    if(res==1){
                        showToast("取消成功")
                        $('#'+id).remove()
                    }
                }
            })
        }})
    })
    var oid='';
    $('.pay ul li').click(function(){
        var type=$(this).attr('data-type')
        $('.pay ul li').each(function(){
            $(this).attr('class','')
        })
        $(this).attr('class','on')
    })
    $('#paycancle').click(function(){
        $('.paymask').hide()
    })
    $('.payOrder').click(function(){
        oid=$(this).attr('data-id')
        $('.paymask').show()
    })
    $('#payconfirm').click(function(){
        $('.paymask').hide()
    var type=$('.paymask .on').attr('data-type');
        payajax(type,"");
    })
    function payajax(type,password){
    var pass=password||''
    $.ajax({
      url:window.location.href,
      type:'post',
      data:{oid:oid,paytype:type,password:pass},
      success:function(res){
        if(res.status==0){
          wxc.xcConfirm("网络繁忙,请重试","info")
        }
        if(res.type==1){
          if(res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else if(res.status==2){
            wxc.xcConfirm("余额不足,是否前往充值?","confirm",{onOk:function(){
              window.location.href="/my/recharge"
            }})
          }else if(res.status==1){
            history.go(0)
          }else if(res.status==3){
            wxc.xcConfirm("支付密码错误","error")
          }
        }else if(res.type==2){
          //微信支付
          if (res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else{
            wxpay(res.res.url)
            oid=res.oid
          }
        }else if(res.type==3){
          //支付宝支付
          if (res.status==0){
            wxc.xcConfirm("支付失败,请重试!","info")
          }else{
            window.location.href=res.res
          }
        }
      }
    })
  }
  function wxpay(codeurl){
    $('#qrcode').qrcode({
      render: "canvas", //也可以替换为table
      width: 200,
      height: 200,
      text: codeurl
    })
    $('.wxpay_mask').show()
    $('body').css({ 
         "overflow-x":"hidden",
         "overflow-y":"hidden"       
     });
    setInterval(checkPay,5000)
  }
  function checkPay(){
    $.ajax({
      url:'/shopcar/ordercheck',
      data:{oid:oid},
      success:function(res){
        if(res==1){
            $('.wxpay_mask').hide()
            showToast("支付成功")
            setTimeout(function(){history.go(0)}, 1500)
        }
      }
    })
  }
  $('.send').click(function(){
    var code = this.getAttribute('data-id');
    $.ajax({
        url:'/my/order_push',
        data:{id:code},
        success:function(res){
            if (res==1) {
                showToast("提醒成功~")
            }else if(res==2){
                showToast("您已经提醒过了~")
            }else{
                showToast("网络繁忙,请重试!")
            }
        },error:function(){
            showToast("网络繁忙,请重试!")
        }
    })
  })
</script>
